<template>
  <div>index</div>
  <hello-world />
  <nuxt-link to="/about">跳转到about</nuxt-link><br />
  <nuxt-link :to="{ path: '/about', query: { userInfo: JSON.stringify(userInfo) } }">带参数跳转到about</nuxt-link><br />
  <nuxt-link to="/user-admin/8">跳转到user</nuxt-link><br />
  <a-button @click="toAbout" type="primary">跳转到about</a-button><br />
  <!-- <h1>{{ $myPlugin("world") }}</h1> -->

  <a-button type="primary" @click="info">Display normal message</a-button>

  <h1>{{ myStore.counter }}</h1>
  <h1>doubleCount: {{ myStore.doubleCounter }}</h1>
  <a-button @click="myStore.add">+1</a-button>

  <!-- <h1>counter: {{ counter }}</h1>
  <a-button type="info" @click="add">++</a-button> -->
</template>

<script setup lang="ts">
import { useMyStore } from "~/store/myStore";

const { data, pending, error, refresh } = useFetch("/api/user", { server: false });
console.log(data);

// useFetch
/* const { data, pending, error, refresh } = await useFetch("https://api.nuxtjs.dev/mountains", {
  pick: ["title"], // 获取返回值中指定的key
  server: false,
}); */

/* const param1 = ref("value1");
const { data, pending, error, refresh } = await useFetch("https://api.nuxtjs.dev/mountains", {
  query: { param1, param2: "value" },
  server: false,
});
console.log(data, pending, error); */

const { data: userInfoData } = await useInfoFetch();
console.log("userInfoData", userInfoData);

const counter = useCounter();
counter.value = 4;
const add = () => {
  counter.value++;
};

/* const counter = useState("counter", () => 1);
counter.value = 4; */

// useCookie
const userInfoCookie = useCookie<{ uid: number; username: string }>("userInfo", { maxAge: 60 });
userInfoCookie.value = {
  uid: 123,
  username: "zs",
};

console.log(useCookie("userInfo").value);

const { $myPlugin, $message } = useNuxtApp();
const $router = useRouter();
const myStore = useMyStore();

const info = () => {
  $message.info("This is a normal message");
};

const userInfo = ref({
  id: 1,
  username: "张三",
});
const toAbout = () => {
  $router.push({
    path: "/about",
    query: { userInfo: JSON.stringify(userInfo.value) },
  });
};
</script>

<style lang="less" scoped></style>
